前言：TypeScript 這麼好，不推嗎？

歡迎來到 30 天的 TypeScript 挑戰之旅！如果你曾經在開發中因為 TypeScript 錯誤而頭疼，那麼這個系列就是為你準備的。在接下來的 30 天裡，我將每天為大家出一道 TypeScript 的實戰問題，這些問題源自我開發中的實際挑戰，我們將一起深度探索，解決問題，並提升編碼能力。

TypeScript 是現代 JavaScript 開發中不可或缺的工具，讓我們的程式碼更嚴謹、能做到型別安全而且更具可讀性，並降低了錯誤的發生機率。不過，即便有了這樣的工具，我們仍然不可避免地會遇到各種錯誤和挑戰。所以我希望通過每天的「實戰演練」，帶領大家一步步攻克這些難題，最終掌握 TypeScript 的精髓。

遊戲規則

1. 每日一題：每天會有一個 TypeScript 的挑戰或錯誤案例，我們要一起來「debug」！

2. 思路解法：首先會從錯誤訊息中找尋線索，最後才提供解法，了解出錯的原因，避免未來遇到一樣或類似的坑。

3. 學習目標：到 30 天結束時，你將能夠熟練處理各種常見的 TypeScript 錯誤和挑戰，並具備面對更多複雜情境的能力。這不僅是提升技術的過程，還是一場與 TypeScript 一起成長的旅程。

我們的終極目標，是能夠輕鬆面對 TypeScript 的錯誤處理，並能夠舉一反三，在工作中運用學到的知識。

希望大家能享受這 30 天的學習過程，並一起成為更好的 TypeScript 開發者！

那我們開始吧！

程式碼

function addVAT(price, vat = 0.2) {
	return price * (1 + vat);
}

const thisErros = addVAT(20, 'this does not work')

const boom = addVAT('not a string!');

聰明的小夥伴應該看出問題了吧？

錯誤提示

function addVAT(price, vat = 0.2) {
return price * (1 + vat);
}
const thisErros = addVAT(20, 'this does not work')

const boom = addVAT('not a string!');

Errors in code

• Parameter 'price' implicitly has an 'any' type.
• Argument of type 'string' is not assignable to parameter of type 'number'.

解讀錯誤訊息

• 參數price的型別沒有被明確定義
• 傳遞一個 string 型別的值給一個預期接收 number 型別的參數。具體來說，函數 addVAT 預期 price 參數是 number，但是傳遞了字串 'not a string!'，這會導致錯誤

解決步驟

• 將 price 和 vat 的型別明確定義為 number
• 在call function 時，傳入的參數必須是 number。傳入 string 會觸發 TypeScript 錯誤。
• 捕捉意外的類型並且錯誤處理

最後結果

function addVAT(price: number, vat: number = 0.2): number {
  return price * (1 + vat);
}

const validResult = addVAT(20); // 正確，返回 24
const invalidResult = addVAT(20, 0.1); // 正確，返回 22
// const thisError = addVAT(20, 'this does not work'); // 這行會報錯，因為 'this does not work' 是字串
// const boom = addVAT('not a string!'); // 這行會報錯，因為 'not a string!' 不是數字

演練網址：
TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

總結小語

• 型別註解：明確定義函數參數型別，避免 any。
• 型別匹配：確保參數傳入值與預期型別一致。
• 錯誤預防：利用 TypeScript 的編譯時型別檢查防止常見錯誤。